#container{
  display:inline-block;
  width:100%;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
}
.cont{
  display:inline-block;
  width:600px;
  float:left;
  margin:10px;
  box-shadow: 5px 4px 4px #595959;
  transition:0.3s ease-in-out;
}

.img{
  z-index:2;
  position:relative;
  width:100%;
  height:400px;
    margin-bottom:10px;
}

#residential-projects{
  background:url('../img/Project img/Residential/Nobles 101/swimnming.webp');
    background-size:cover;
    background-repeat: no-repeat;
  animation-name:slide-res;
  animation-duration: 8s;
  animation-iteration-count: infinite;
    transition:0.4s ease-in-out;
}
.cont:hover{
  box-shadow: 8px 7px 7px #595959;
}
.img:hover .proj-type{
background:#0000cc;
}
#industrial-projects{
  background:url('../img/Project img/Industrial/Vegetable  Oil  Refining  Plant/fact18.webp');
    background-size:cover;
    background-repeat: no-repeat;
  animation-name:slide-ind;
  animation-duration: 8s;
  animation-iteration-count: infinite;
    transition: 0.4s ease-in-out;
}
#commercial-projects{
  background:url('../img/Project img/Commercial/As-Sayeded Zainab Accomodation  And Commercial  Complex/1HOTEL.webp');
    background-size:cover;
    background-repeat: no-repeat;
  animation-name:slide-com;
    animation-duration: 8s;
  animation-iteration-count: infinite;
    transition: 0.4s ease-in-out;
}
#education-projects{
 background:url('../img/Project img/Education/Damascus Community School Expansion/4.webp');
    background-size:cover;
    background-repeat: no-repeat;
  animation-name:slide-edu;
    animation-duration: 8s;
  animation-iteration-count: infinite;
    transition: 0.4s ease-in-out;
}
#entertainment-projects{
 background:url('../img/Project img/Entertainment/Aleppo Opera House and Bibliotheca – Dar Al-Assad for Art & Culture Competition/sheet-01.webp');
    background-size:cover;
    background-repeat: no-repeat;
  animation-name:slide-entertain;
    animation-duration: 8s;
  animation-iteration-count: infinite;
    transition: 0.4s ease-in-out;
}
#medical-projects{
 background:url('../img/Project img/Medical/Dreikeesh  Hospital/hosp7.webp');
    background-size:cover;
    background-repeat: no-repeat;
  animation-name:slide-med;
    animation-duration: 8s;
  animation-iteration-count: infinite;
    transition: 0.4s ease-in-out;
}
#offices-projects{
background:url('../img/Project img/Offices/The Eighth  Gate Project/01.webp');
    background-size:cover;
    background-repeat: no-repeat;
  animation-name:slide-offi;
    animation-duration: 8s;
  animation-iteration-count: infinite;
    transition: 0.4s ease-in-out;
}
#touristic-projects{
background:url('../img/Project img/Touristic/Mounument Of The UNKNOWN Soldier/unknown soldier.webp');
    background-size:cover;
    background-repeat: no-repeat;
  animation-name:slide-tour;
    animation-duration: 8s;
  animation-iteration-count: infinite;
    transition: 0.4s ease-in-out;
}
#religious-projects{
background:url('../img/Project img/Religious/Hassibeh Mosque And Girls School/IMAGE_00649.webp');
    background-size:cover;
    background-repeat: no-repeat;
  animation-name:slide-rel;
    animation-duration: 8s;
  animation-iteration-count: infinite;
    transition: 0.4s ease-in-out;
}
.proj-type{
  z-index:2;
  position:absolute;
  color:white;
  background:black;
  font-size:20px;
  text-decoration:none;
  padding:20px;
  top:85%;
  width:40%;
  padding:10px;
  transition:0.4s;
}
.proj{
  text-decoration:none;
  color:black;
}
@keyframes slide-rel{
0%{
background:url('../img/Project img/Religious/Makam ALSayideh RUQIEH/MAIN-ROUK.webp');
background-size:cover;
}
25%{
background:url('../img/Project img/Religious/Baeira Mosque/perspective.webp');
background-size:cover;
}
50%{
background:url('../img/Project img/Religious/Rehabilitatiom Of Faroukh Shah Mosque/26230427_1493044654154475_3531075353972732539_n.webp');
background-size:cover;
}
100%{
background:url('../img/Project img/Religious/Eighth Gate Mosque Competition/009.webp');
background-size:cover;
}
}


@keyframes slide-res{
  0%{
    background:url('../img/Project img/Residential/Villa  Assayyabi/collayout copy.webp');
      background-size:cover;
  }
  25%{
    background:url('../img/Project img/Residential/Nobles 101/swimnming.webp');
      background-size:cover;
  }
  50%{
    background:url('../img/Project img/Residential/Sapphire Residential Compound/04.webp');
      background-size:cover;
  }
100%{
background:url('../img/Project img/Residential/Sapphire Residential Compound/04.webp');
background-size:cover;
}
}
@keyframes slide-ind{
  0%{
    background:url('../img/Project img/Industrial/Feed Roughage Plant/fact4.webp');
      background-size:cover;
  }
  50%{
    background:url('../img/Project img/Industrial/Oil Storage Facilities/fact13.webp');
      background-size:cover;
  }
  100%{
    background:url('../img/Project img/Industrial/North  Middle  Area  Gas Explosion/entrance photo 7.webp');
      background-size:cover;
  }
}
@keyframes slide-com{
  0%{
    background:url('../img/Project img/Commercial/Yalbougha  Building Complex/DSC04606.webp');
      background-size:cover;
  }
  50%{
    background:url('../img/Project img/Commercial/Damascus  Boulevard  Shopping  Center/main elevation.webp');
      background-size:cover;
  }
  100%{
    background:url('../img/Project img/Commercial/Nahas Showrooms/188548.webp');
      background-size:cover;
  }
}
@keyframes slide-edu{
0%{
background:url('../img/Project img/Education/Damascus Community School Expansion/6.webp');
      background-size:cover;
}
50%{
background:url('../img/Project img/Education/Children Discovery Center/Massar01.webp');
      background-size:cover;
}
100%{
background:url('../img/Project img/Education/Children Discovery Center/Massar06.webp');
      background-size:cover;
}
}
@keyframes slide-entertain{
0%{
background:url('../img/Project img/Entertainment/Aleppo Opera House and Bibliotheca – Dar Al-Assad for Art & Culture Competition/sheet-07.webp');
      background-size:cover;
}
50%{
background:url('../img/Project img/Entertainment/Rainbow Land/Flat-Plan.webp');
      background-size:cover;
}
100%{
background:url('../img/Project img/Entertainment/Aleppo Opera House and Bibliotheca – Dar Al-Assad for Art & Culture Competition/sheet-06.webp');
background-size:cover;
}
}
@keyframes slide-med{
0%{
background:url('../img/Project img/Medical/Outpatient Surgery Center/small View 05.webp');
      background-size:cover;
}
50%{
background:url('../img/Project img/Medical/Syrian  American  Medical  City (SAMC)/21 0008.webp');
background-size:cover;
}
100%{
background:url('../img/Project img/Medical/Syrian  American  Medical  City (SAMC)/SAMC.webp');
background-size:cover;
}
}
@keyframes slide-offi{
0%{
background:url('../img/Project img/Offices/Emaar Syria Head Offices Building/8th gate.webp');
      background-size:cover;
}
50%{
background:url('../img/Project img/Offices/The Eighth  Gate Project/04.webp');
      background-size:cover;
}
100%{
background:url('../img/Project img/Offices/Emaar Syria Head Offices Building/cam 050002.webp');
      background-size:cover;
}
}
@keyframes slide-tour{
0%{
background:url('../img/Project img/Touristic/Safir As-Sayedeh Zainab Hotels Complex/perspective2.webp');
      background-size:cover;
}

20%{
background:url('../img/Project img/Touristic/Mashta AL-Hilou Resort/machta2.webp');
      background-size:cover;
}
40%{
background:url('../img/Project img/Touristic/Amrit  Touristic  Vilage/1.webp');
      background-size:cover;
}
50%{
background:url('../img/Project img/Touristic/Iraq - Baghdad Streets Rehabilitation/St07.webp');
      background-size:cover;
}
80%{
background:url('../img/Project img/Touristic/Semiramis Golden Tulip Hotel Project/Semiramis Day View.webp');
      background-size:cover;
}
100%{
background:url('../img/Project img/Touristic/Upgrading  the Main Entrance Of The Four Seasons Hotel/009.webp');
      background-size:cover;
}
}
@media screen and (max-width:1260px){
  .cont{
    width:500px;
  }
}
@media screen and (max-width:1040px){
  #container{
    display: inline-block;
  }
  .cont{
  width:100%;
  margin-left:0px;
  margin-bottom:5px;
  display:inline-block;
}
.proj-type{
width:100%;
}
}